<template>
	 <!-- <my-login v-if="!userInfo"></my-login> -->
	<!-- <view v-else> -->
	<view>
	 	<view class="picker-search">
	 		<page-head :title="title"></page-head>
	 		<view class="uni-list" >
	 			<view class="uni-list-cell">
	 				<view class="uni-list-cell-db">
	 					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
							<view v-if="deptId>0" class="uni-input" :style="{'font-size': fontSize+'px'}">{{dept.name}}</view>
							
	 						 <view v-else class="uni-input" :style="{'font-size': fontSize+'px'}">{{array[index].name}}</view>
	 					
	 					
	 					</picker>
	 				</view>
	 			</view>
	 		</view>
	 		
	 		
	 		<!-- <view class="right-view">
	 			<my-search class="mysearch"></my-search>
	 		</view> -->
	 	</view>
	 	<!-- 关注 -->
	 	<view>
	 		<view class="head-nav">
	 			<view :class="navIndex==0?'activite':''" @click="checkIndex(0)">关注</view>
	 			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">大赛</view>
	 			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">活动</view>
	 			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">协会</view>
	 		</view>
	 		
	 		<!-- 内容切换 -->
	 		<view  class="content" v-if="navIndex==0">
	 			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
	 				<view class="scroll-view-item_H" v-if="navIndex==0" v-for="(item,i) in associations" :key="i">
	 					<navigator class="scroll-nav" :url="'/subpkg/association/association?id=' +item.id">
	 						<image  class="scroll-image"  :src="item.associationImg" ></image>
	 						<text class="cal-text"> {{item.associationName}}</text>
	 					</navigator>
	 				</view>
	 				<view class="scroll-view-item_H">
	 					<navigator class="scroll-nav" url="/subpkg/association_lists/association_lists">
	 						<uni-icons type="plus" size="30"></uni-icons>
	 					</navigator>
	 				</view>
	 			</scroll-view>
	 		</view>
	 		<view class="content" v-if="navIndex==1" @click="getAllCompetition()">
	 			
	 		</view>
	 		<view class="content" v-if="navIndex==2">
	 		</view>
	 		<view class="content" v-if="navIndex==3">
	 		</view>
	 		
	 	</view>
	 	<view>
	 		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
	 			<swiper-item v-for="(item,i) in swiperList" :key="i">
	 				<!-- <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?id=' +item.id"> -->
	 				<navigator class="swiper-item" :url="item.adUrl" @click="toOtherUrl(item.adUrl)">
	 					<!-- <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link> -->
	 					<image :src="item.adImg"></image>
	 					<view  class="introduce">
	 						<!-- 在图片上添加文字 -->
	 						<text  class="textTitle">
	 							{{item.adTitle}}
	 						</text>
	 						<text  class="textIntroduce">
	 							{{item.adIntroduction}}
	 						</text>
	 					</view>		
	 				</navigator>
	 			</swiper-item>
	 		</swiper>
	 	</view>
	 	<view class="classification">
	 		<p style="text-decoration: underline;padding-left: 5px;">热门分类</p>
	 		<view class="hotclass">
	 			<view>
	 				<navigator  style="display: flex;flex-direction: column;"   
	 				url="/subpkg/cate/cate">
	 					<image  class = "cal-image" src="/static/hot/hot.png"></image>
	 					<text class="cal-text"> 二手市场</text>
	 				</navigator>
	 			</view>
	 			<!-- <view  >
	 				<navigator  style="display: flex;flex-direction: column;"   
	 				url="/subpkg/errands/errands">
	 					<image  class = "cal-image" src="/static/hot/hot.png"></image>
	 					<text class="cal-text"> 校园跑腿</text>
	 				</navigator>
	 			</view>
	 			<view  >
	 				<navigator  style="display: flex;flex-direction: column;"   
	 				url="/subpkg/course/course">
	 					<image  class = "cal-image" src="/static/hot/hot.png"></image>
	 					<text class="cal-text"> 课程安排</text>
	 				</navigator>
	 			</view>
	 			<view  >
	 				<navigator style="display: flex;flex-direction: column;"   
	 				url="/subpkg/school_note/school_note">
	 					<image  class = "cal-image" src="/static/hot/hot.png"></image>
	 					<text class="cal-text"> 学霸笔记</text>
	 				</navigator>
	 			</view> -->
	 		</view>
	 		
	 	</view>
	 	
	 	<view class="hotspot" >
	 		<view class="hotspot-title">
	 			<p style="text-decoration: underline;padding-left: 5px;margin-top: 14px;">校园热点</p>
	 			<!-- 跳转到发布页面 -->
	 			<view class="release">
	 				<navigator class="scroll-nav" url="/subpkg/release/release">
	 					<uni-icons type="compose" size="25"  ></uni-icons>发布热点
	 				</navigator>
	 			</view>
	 		</view>
	 		
	 		<view class="hot-floor">
	 			<!-- 左 -->
	 			<view class="left-item"  >
	 				<view class="hot-item" v-for="(item, i) in floorList1" :key="i">
	 					<!-- 图片 -->
	 					<navigator class="assocition-item" :url="'/subpkg/association_trends/association_trends?id=' +item.id+'&name='+item.createUserName+'&imgUrl='+item.littleImage+'&createUser='+item.createUser +'&title=热点详情' ">
	 						<view class="hot-img"  >
	 							<view class="" v-if="item.videoUrl">
	 								<video class="hot-img-item" :src="item.videoUrl " ></video>
	 							</view>
	 							<view v-else>
	 								<image v-if="item.imgUrl != ''"  class="hot-img-item" :src="item.imgUrl.split(',')[0]" ></image>
									<!-- <image v-else class="hot-img-item" :src="defaultPic" ></image> -->
	 							</view>
	 							
	 						</view>
	 						<view class="hot-introduce">{{item.content}}</view>
	 					</navigator>
	 					<view class="hot-down">
	 						<view class="hot-down-left">
	 							
	 							<image class="hot-down-img-item" :src="item.littleImage|| defaultPic" ></image>
	 							<view class="hot-down-name" >{{item.createUserName}}</view>
	 						</view>
	 						<view class="hot-down-right">
	 							<!-- 点赞的心形图标 -->
	 							<view class="hot-down-right-heart" v-if="item.userLikesFlag===true" @click="concernHeart(item,i)">
	 								<uni-icons type="hand-up" bo size="16" color="red"></uni-icons>
									{{item.hotspotsLikesNum}}
	 							</view>
	 							<view class="hot-down-right-heart" v-else  @click="concernHeart(item,i)">
	 								<uni-icons type="hand-up" size="16" ></uni-icons>
									{{item.hotspotsLikesNum}}
	 							</view>
	 							<!-- <view class="hot-down-right-num">
	 								{{item.hotspotsLikeNum}}
	 							</view> -->
	 							
	 							
	 							
	 						</view>
	 					</view>
	 				</view>
	 			</view>
	 			
	 			<view class="right-item">
	 				<view class="hot-item" v-for="(item, i) in floorList2" :key="i" >
	 					<navigator class="assocition-item" :url="'/subpkg/association_trends/association_trends?id=' +item.id+'&name='+item.createUserName+'&imgUrl='+item.littleImage +'&createUser='+item.createUser+'&title=热点详情' ">
	 						<view class="hot-img"  >
	 							<view class="" v-if="item.videoUrl">
	 								<video class="hot-img-item" :src="item.videoUrl " ></video>
	 							</view>
	 							<view v-else>
	 								<image v-if="item.imgUrl != ''"  class="hot-img-item" :src="item.imgUrl.split(',')[0]" ></image>
	 							</view>
	 							
	 						</view>
	 						<view class="hot-introduce">{{item.content}}</view>
	 					</navigator>
	 					<view class="hot-down">
	 						<view class="hot-down-left">
	 							<image class="hot-down-img-item" :src="item.littleImage|| defaultPic" ></image>
	 							<view class="hot-down-name" >{{item.createUserName}}</view>
	 						</view>
	 						<view class="hot-down-right">
	 							<!-- 点赞的心形图标 -->
	 							<view class="hot-down-right-heart" v-if="item.userLikesFlag===true" @click="concernHeart(item,i)">
	 								<uni-icons type="hand-up" bo size="16" color="red"></uni-icons>
									{{item.hotspotsLikesNum}}
	 							</view>
	 							<view class="hot-down-right-heart" v-else  @click="concernHeart(item,i)">
	 								<uni-icons type="hand-up" size="16" ></uni-icons>
									{{item.hotspotsLikesNum}}
	 							</view>
	 							<!-- <view class="hot-down-right-num">
	 								{{item.hotspotsLikeNum}}
	 							</view> -->
	 						</view>
	 						
	 					</view>
	 				</view>
	 			</view>
	 			
	 		</view>
	 		
	 	</view>
	 	
	 </view>
	
</template>
<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import { mapMutations,mapState } from 'vuex'
	//import WebSocketManager  from '@/utils/websocketNew.js';
	export default {
		
		data() {
			return {
				title: 'picker',
				array: [{name:'中国'}],
				//array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
				index: 0,
				fontSize: 16,
				scrollTop: 0,
				navIndex: 0,
				//轮播图数据
				swiperList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				//关注的协会
				associations: [],
				//最新的大赛
				competitions: [],
				// 请求参数对象
				queryObj: {
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 10
				},
				// 关注的协会
				queryFollowObj: {
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 100
				},
				floolListTotal: [],
				floorList1: [],
				floorList2: [],
				// 总数量，用来实现分页
				total: 0,
				defaultPic:
				'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				// 是否正在请求数据
				isloading: false,
				wsTaskId: null,
			}
		},
		computed: {
		  ...mapState('m_user', ['userinfo']),
		  ...mapState('m_user', ['userId']),
		  ...mapState('m_dept', ['deptId']),
		  ...mapState('m_dept', ['dept']),
		  ...mapState('m_message', ['message']),
		},
		onLoad() {
			console.log("==============userId:"+this.userId)
			//先判断userId是否存在，如果存在，就不获取头像和昵称了，如果不存在，就去获取，跳转到登录页面
			if(this.userId==0){
				this.getToken() ;
				
			}
			this.baseUrl=uni.$http.baseUrl
			
			
			//获取轮播图的数据
			 this.getSwiperList()
			// //得到所有学校
			 this.getSchoolList()
			// 	this.clearFloor(),
			// //得到的热点内容
			// this.getFloorList()
			//得到未读的消息
			this.getMessage()
			//连接websocket,如果没有连接过就调用
			//if(this.wsTaskId==null){
				//this.webSocketManager = new WebSocketManager(this.userId);  
			//}
			
			
		},
		onShow() {
			
			//得到关注的协会列表
			this.getAssociationList()
			
			this.clearFloor()
			
			//得到的热点内容
			this.getFloorList()
			//得到未读的消息
			this.getMessage()
		},
		
		
		methods: {
			...mapMutations('m_dept', ['updateDeptInfo']),
			...mapMutations('m_message', ['updateMessageInfo']),
			...mapMutations('m_ws', ['updateWsTaskId']),
			...mapMutations('m_user', ['updateUserInfo']),
			...mapMutations('m_user', ['updateUserId']),
			async getToken() {
			  // 获取 code 对应的值
				const res= await uni.login()
			  // const [err, res] = await uni.login().catch(err => err)
				console.log(res)
			  if (res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
					
			 
				await uni.request({
					url: uni.$http.baseUrl+'/wechatApplet/getStudentInfo',
					data: {
						code: res.code,
						//code: 1,
					},
					method: 'POST',
					header: {
						//"Content-Type": "multipart/form-data",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res)
						if(res.data.code==-1||res.data.code==0	){
							//需要跳转的外部路径
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else if(res.data.code==1){
							this.updateUserInfo(res.data.data)
							console.log(res.data.data.id)
							this.updateUserId(res.data.data.id)
						//	this.updateDeptInfo(res.data.data.deptId)
						}
						
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg('登录失败')
					}
				});
			},
			//外部链接
			toOtherUrl(itemUrl){
				//需要跳转的外部路径
				uni.navigateTo({
					url:'/pages/webView/webView?url='+itemUrl
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				const nameLength = this.array[e.detail.value].name.length
				const sysInfo = uni.getSystemInfoSync()
				// 学校名称字数大于4时动态计算fontsize,	小于4时固定为16
				if(nameLength>4){
					this.fontSize = sysInfo.windowWidth/3/1.4/nameLength
				}else{
					this.fontSize =16
				}
				//将选择的学校放入内存中
				this.updateDeptInfo(this.array[e.detail.value])
				this.clearFloor()
				this.getFloorList()
			},
			clearFloor(){
				// 1. 重置关键数据
				this.queryObj.pageNo = 1
				this.total = 0
				this.isloading = false
				this.floolListTotal = []
				this.floorList1 = []
				this.floorList2 = []
			},
			
			 //获取学校列表
			 async getSchoolList(){
			 	await uni.request({
			 	    url: this.baseUrl+'/api/mobileDept/getSchoolList',
			 	    data: {
			 	       // 页码值
			 	       pageNo: this.queryObj.pageNo,
			 	       // 每页显示多少条数据
			 	       pageSize: this.queryObj.pageSize,
			 	    },
			 		method: 'POST',
			 	    header: {
			 	          // "Content-Type": "application/json",
			 	          "Content-Type": "application/x-www-form-urlencoded"
			 	        },
			 	    success: (res) => {
			 			this.array=res.data.data
			 	    },
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			 },
			 //获取未读消息数量
			 async getMessage(){
			 	await uni.request({
			 	    url: this.baseUrl+'/api/mobileNotice/countNoReadNotice',
			 	    data: {
			 	       // 当前登录人
			 	       userId: this.userId,
			 	    },
			 		method: 'POST',
			 	    header: {
			 	          // "Content-Type": "application/json",
			 	          "Content-Type": "application/x-www-form-urlencoded"
			 	        },
			 	    success: (res) => {
						//将选择的学校放入内存中
						this.updateMessageInfo(res.data.data)
						if(res.data.data.count!=0){
							 uni.setTabBarBadge({ 
								index: 1,// 索引下标
								text: res.data.data.count+""//动态数字
							})
						}
			 	    },
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			 },
			 
			 
			 async getAssociationList() {
			 	 
				 await uni.request({
				     url: this.baseUrl+'/api/association/getMyFollowAssociations',
				     data: {
						followId: this.userId,
				        // 页码值
				        pageNo: this.queryFollowObj.pageNo,
				        // 每页显示多少条数据
				        pageSize: this.queryFollowObj.pageSize,
				     },
				 	method: 'POST',
				     header: {
				           // "Content-Type": "application/json",
				           "Content-Type": "application/x-www-form-urlencoded"
				         },
				     success: (res) => {
				 		this.associations=res.data.data
				     },
				 	fail: (res) =>{
				 		if (res.statusCode !== 200) return uni.$showMsg()
				 	}
				 });
			  
			  },
			 checkIndex(index) {
				this.navIndex = index;
				if(index==1){
					
					uni.navigateTo({
						url: '/subpkg/competiton_lists/competiton_lists'
					})
					this.checkIndex(0)
				}else if(index==2){
					uni.navigateTo({
						url: '/subpkg/activity_lists/activity_lists'
					})
					this.checkIndex(0)
				}
				else if(index==3){
					uni.navigateTo({
						url: '/subpkg/association_lists/association_lists'
					})
					this.checkIndex(0)
				}
				
			},
			async getSwiperList(){
				await uni.request({
				    url: this.baseUrl+'/api/mobileAdvertisement/getAdInfoList',
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				        },
				    success: (res) => {
						this.swiperList=res.data.data
						
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
				
			},
			scroll: function(e) {
				
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			//校园热点
			async getFloorList() {
				// ** 打开节流阀
				this.isloading = true
				
				await uni.request({
				    url: this.baseUrl+'/api/hotspot/getHotspot',
					data: {
					   deptId: this.deptId,
					   loginUserId: this.userId,
					   // 页码值
					   pageNo: this.queryObj.pageNo,
					   // 每页显示多少条数据
					   pageSize: this.queryObj.pageSize,
					},
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				        },
				    success: (res) => {
						// ** 关闭节流阀
						this.isloading = false
						this.floolListTotal=res.data.data
						if(this.floolListTotal==null){
							return
						}
						for(var i=0;i< this.floolListTotal.length;i++){
							if(i%2===0){
								this.floorList1.push(this.floolListTotal[i])
							}else if(i%2===1){
								this.floorList2.push(this.floolListTotal[i])
							}
							
						}
						this.total = this.floolListTotal.length
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
				
			 },
			 //校园热点关注
			 concernHeart(item,index){
				 if(item.userLikesFlag==null||item.userLikesFlag==false){
				 	this.likeHotspot(item,index)
				 }else{
				 	this.cancelLikeHotspot(item,index)
				 }
			 },
			 //点赞校园热点
			 async likeHotspot(item,index){
			 	await uni.request({
			 		url: this.baseUrl+'/api/hotspot/likeHotspot', 
			 		data: {
			 			// 社团Id
			 			id: this.id,
			 			// 页码值
			 			userId: this.userId,
			 			hotspotId: item.id,
			 			
			 		},
			 		method: 'POST',
			 		header: {
			 			   "Content-Type": "application/json",
			 			 // "Content-Type": "application/x-www-form-urlencoded"
			 			},
			 		success: (res) => {
			 			// ** 关闭节流阀
			 			//如果点赞成功了,就给这个评论放true
			 			item.userLikesFlag=true
			 			item.hotspotsLikesNum+=1
			 			//点赞的id
			 			this.likeId=res.data
			 		},
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			 },
			 //取消校园热点
			 async cancelLikeHotspot(item,index){
			 	if(item.userLikesId!=null){
			 		this.likeId=item.userLikesId
			 	}
			 	await uni.request({
			 		url: this.baseUrl+'/api/hotspot/cancelLikeHotspot', 
			 		data: {
			 			// 点赞Id
			 			id: item.userLikesId,
			 		},
			 		method: 'POST',
			 		header: {
			 			  //  "Content-Type": "application/json",
			 			 "Content-Type": "application/x-www-form-urlencoded"
			 			},
			 		success: (res) => {
			 			// ** 关闭节流阀
			 			//如果点赞成功了,就给这个评论放true
			 			item.userLikesFlag=false
			 			item.hotspotsLikesNum-=1
			 		},
			 		fail: (res) =>{
			 			if (res.statusCode !== 200) return uni.$showMsg()
			 		}
			 	});
			 },
			 
			 
		},
		
		// 触底的事件
		onReachBottom() {
			// 判断是否还有下一页数据
			if (this.queryObj.pageSize > this.total){
				return uni.$showMsg('数据加载完毕！')
			}
			
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.isloading) {
				return
			}
			 // 让页码值自增 +1
			 this.queryObj.pageNo += 1
			 // 重新获取列表数据
			 this.getFloorList()
		},
		// 下拉刷新的事件
		onPullDownRefresh() {
			// 1. 重置关键数据
			this.clearFloor(),
			// 2. 重新发起请求
			this.getFloorList(() => uni.stopPullDownRefresh())
		},
	
	}
</script>

<style lang="scss">
	@import "@/static/iconfont.css";
swiper{
	height: 330rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	.swiper-item,
	image{
		width: 100%;
		height: 100%;
	}
	padding-top: 15px ;
}
view{
	background-color: #ffffff;
}
.uni-input {
	padding: 0 15px;
	/* text-align: right; */
	padding-top: 10px;
	align-items: center;
}
.uni-list{
	width: 50%;
	background-color: #ffffff;
	flex: 1
}
.right-view{
	flex: 2;
	padding-top: 15px;
}
.picker-search{
	background-color: #ffffff;
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 height: 50px;
}
.head-nav {
	margin-bottom: 15px ;
	display: flex;
	justify-content: space-around;
	align-items: center;	
}

.activite {
	color: #000000;
	font-weight: bold;
	
	border-bottom: 1px solid #000000;
}

.head-nav>view {
	padding-bottom: 10rpx;
	color: #000000;
}

.content {
	/* background: #008000; */
	height: 70px;
}
.textTitle  {
    position: absolute;
    color: #FFFFFF; /* 设置文字颜色 */
    font-size: 15px; /* 设置文字大小 */
    top: 50%; /* 垂直居中 */
    left: 3%; /* 水平居中 */
	width: 70%;
	mix-blend-mode: difference; /* 可选的混合模式，根据背景图片的颜色来调整 */
}
.textIntroduce  {
    position: absolute;
    color: #FFFFFF; /* 设置文字颜色 */
    font-size: 12px; /* 设置文	字大小 */
    top: 65%; /* 垂直居中 */
    left: 3%; /* 水平居中 */
	width: 70%;
	height: 20%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space:overflow;
	mix-blend-mode: difference; /* 可选的混合模式，根据背景图片的颜色来调整 */
	
}
.introduce{
	font-weight: 600;
}
.classification{
	color: #000000;
	font-weight: 600;
	padding-top: 10px ;
	height: 100px;
}
.hotspot{
	color: #000000;
	font-weight: 600;
	padding-top: 10px ;
	
}
.hotclass{
	display: flex;	
	//justify-content: space-around;
	padding-left: 30px;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 10px;
	
}
.hot-class{
	width: 25%; /* 设置容器宽度 */
	height: 200rpx; /* 设置容器高度 */
	display: flex;
	
}
.cal-image{
	width: 60px; /* 设置图片宽度 */
	height: 60px; /* 设置图片高度 */
}
.cal-text{
	font-size: 13px;
	margin-top: 5px;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item_H {
	padding-left: 10px;
	display: inline-block;
	width: 25%;
	height: 100%;
	border-left: 1rpx solid #efefef;
	
	.scroll-nav{
		display: flex;
		flex-direction: column;
		align-items: center;
		.scroll-image{
			width: 80%;
			height: 50px;
		}
		.cal-text{
			font-size: 13px;
			font-weight: bold;
		}
	}
	.scroll-view-plus{
		height: 100%;
	}
}
.hotspot-title{
	display: flex;
	.release{
		
		margin-top: 5px;
		margin-left: auto;
		margin-right: 10px;
	}
}

.hot-floor{
	background-color: #fdfdfd;
	display: flex;
	 flex-wrap: wrap;
	 justify-content: space-between;
	 font-family: 'Songti SC', '宋体', serif;
	.left-item{
		background-color: #fdfdfd;
		width: 45%;
		margin: 10px 0px;
		margin-left: 10px;
	}
	.right-item{
		background-color: #fdfdfd;
		width: 45%;
		margin: 10px;
	}
	
}
.hot-item{
	 position: relative;
	 padding-bottom: 10px; /* 可根据需要调整 */
}
.hot-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 10px solid #fdfdfd; /* 设置下边颜色 */
  }
.hot-img{
	.hot-img-item{
		width: 100%;
		height: 180px;
	}
}
.hot-introduce{
	font-size: 14px;
	padding: 5px 13px;
	font-weight: 300;
	letter-spacing: 1px;
	width: 200px; /* 定义容器宽度 */
	  white-space: nowrap; /* 文本不换行 */
	  overflow: hidden; /* 超出部分隐藏 */
	  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.hot-down{
	height: 30px;
	margin-top: 5px;
	margin-left: 10px;
	margin-button: 5px;
	display: flex;
	.hot-down-left{
		width: 60%;
		height: 100%;
		display: flex;
		.hot-down-img-item{
			width: 20px; /* 宽度应该和高度相同 */
			height: 20px;
			border-radius: 50%; /* 圆形效果 */
		}
		.hot-down-name{
			margin-left: 10px;
			font-size: 10px;
			font-weight: 300;
			padding-top: 5px
		}
	}
	.hot-down-right{
		display: flex;
		margin-left: auto;
		margin-right: 5px;
		.hot-down-right-num{
			margin-left: 5px;
			font-size: 10px;
			font-weight: 300;
			padding-top: 3px
		}
	}
	
}

template{
	background-color: #ffffff;	
	
}


</style>
